<template>
    <div id="main" style="height: calc(100vh - 60px)">
        <div id="login">
            <el-tabs v-model="activeName">
                <el-tab-pane label="账号密码登录" name="first">
                    <el-form :model="user1" :rules="rules1" status-icon ref="userForm1">
                        <el-form-item prop="userNum">
                            <el-input v-model="user1.userNum" placeholder="请输入账号" type="text"
                                      prefix-icon="el-icon-user-solid"
                                      style="margin:20px 0"
                                      oninput="value=value.replace(/[^\d]/g,'')">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="userPassword">
                            <el-input v-model="user1.userPassword" placeholder="请输入密码" type="password"
                                      prefix-icon="el-icon-unlock">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button class="btn" @click="loginAccount">登录</el-button>
                    <div>
                        <p style="margin-left: 100px;margin-top: 10px">
                            <a style="float: right;margin-right: 100px;cursor: pointer"
                               @click="$router.push('/userregister')">去注册</a>
                            <a style="float: right;margin-right: 20px;cursor: pointer"
                               @click="$router.push('/userforgetpassword')">立即找回</a></p>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="邮箱登录" name="second">
                    <el-form :model="user2" :rules="rules2" status-icon ref="userForm2">
                        <el-form-item prop="email">
                            <el-input v-model="user2.email" placeholder="请输入邮箱" type="text"
                                      prefix-icon="el-icon-message"
                                      style="margin:20px 0">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input style="width: 190px" v-model="user2.code" placeholder="请输入验证码" type="text"
                                      prefix-icon="el-icon-unlock">
                            </el-input>
                            <el-button style="height: 40px;width: 110px" type="primary" @click="getCode">获取验证码
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <el-button class="btn" @click="loginEmail">登录</el-button>
                    <div>
                        <p style="margin-left: 100px;margin-top: 10px">
                            <a style="float: right;margin-right: 100px;cursor: pointer"
                               @click="$router.push('/userregister')">去注册</a></p>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "UserLogin",
        data() {
            const regMobile = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            var checkmail = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入邮箱'));
                }
                setTimeout(() => {
                    if (!regMobile.test(value)) {
                        callback(new Error('请输入正确的邮箱'));
                    } else {
                        callback();
                    }
                }, 500);
            };
            return {
                activeName: 'first',
                user1: {},
                user2: {},
                rules1: {
                    userNum: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur'}
                    ],

                    userPassword: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur'}
                    ]
                },
                rules2: {
                    code: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, validator: checkmail, trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            getCode() {
                if (!this.user2.email) {
                    this.$message.warning("请输入邮箱")
                    return
                }
                if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.user2.email)) {
                    this.$message.warning("请输入正确的邮箱格式")
                    return;
                }
                request.get("user/email/" + this.user2.email).then(res => {
                    if (res.code === '200') {
                        this.$message.success("发送成功")
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            loginAccount() {
                this.$refs['userForm1'].validate((valid) => {
                    if (valid) {  // 表单校验合法
                        request.post("/user/loginAccount", this.user1).then(res => {
                            if (res.code === '200') {
                                this.$store.commit("setUserInfo", JSON.stringify(res.data))  // 存储用户信息到浏览器
                                this.$router.push("/user")
                                this.$store.dispatch("getuserinfo")
                                this.$message.success("登录成功")
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                });
            },
            loginEmail() {
                this.$refs['userForm2'].validate((valid) => {
                    if (valid) {  // 表单校验合法
                        request.post("/user/loginEmail", this.user2).then(res => {
                            if (res.code === '200') {
                                window.localStorage.setItem("user", JSON.stringify(res.data))  // 存储用户信息到浏览器
                                this.$router.push("/user")
                                this.$message.success("登录成功")
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                });
            },
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .el-input {
        width: 300px;
        height: 50px;
    }

    .btn {
        width: 300px;
        height: 50px;
        margin-top: 50px;
        background-color: beige;
        font-size: 20px;
    }

    #main {
        background-image: url('../../assets/loginBk.jpg');
        background-size: inherit;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #login {
        background-color: rgba(255, 255, 255, 0.7);
        height: 400px;
        width: 500px;
        position: absolute;
        right: 120px;
        top: 200px;
    }
</style>